<template>
  <div class="Echart">
    <baseEchart :options="pieoptions" height="280px"></baseEchart>
  </div>
</template>

<script setup>
import { defineProps, computed } from "vue";
import baseEchart from "@/base-ui/echart/index.js";
const props = defineProps({
  peiData: {
    type: Array,
  },
});
const pieoptions = computed(() => {
  return {
    title: {
      text: "",
      subtext: "Fake Data",
      left: "center",
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      left: "left",
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: "50%",
        data: props.peiData,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };
});
</script>

<style lang="scss" scope></style>
